<!--
 @description 角色用户名单
 @fileName index.vue
 @author zengqiongying
 @created 2024/01/19 13:30:24
-->
<template>
  <div>
    <div class="qup-title-box">
      <span class="border" /><span>用户名单</span> <span class="grey-color">实际作用于用户</span>
    </div>
    <table-box
      ref="refTable"
      :selected-arry.sync="tableSelected"
      :table-config="tableConfig"
      :other-filters="otherFilters"
      :table-height="400"
      table-row-key="id"
      show-index
      show-selection
      :show-custom-collect="false"
      :show-custom-combine="false"
      :show-custom-setting="false"
      :setting-auto-request="false"
      @btnOperate="btnOperate"
      @selection-change="handleSelectionChange"
    />
    <!-- 导出 -->
    <export-files
      v-if="exportVisible"
      title="用户名单导出"
      :visible.sync="exportVisible"
      :config="exportConfig"
    />
    <AddUser v-if="showAdd" :visible.sync="showAdd" multiple @change="handleSave" />
  </div>
</template>

<script>
import AddUser from './AddUser'
import { parseTime } from '@/utils'
import { delRoleAccount, saveRoleAccount } from '@/api/roleConfig'
export default {
  name: 'RoleUserList',
  components: { AddUser },
  props: {
    roleId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      tableSelected: [], // 当前所选中表格行数据
      otherFilters: [], // 表格额外查询条件
      tableConfig: {
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/roleAccountList/page`,
        pageSize: 10,
        sort: 'createTime',
        buttonGroupCode: 'roleCustomer',
        tabIndex: 2,
        setting: [
          {
            prop: 'account',
            label: '账号',
            minWidth: 150
          },
          {
            prop: 'userName',
            label: '姓名',
            minWidth: 150
          },
          {
            prop: 'staffCode',
            label: '员工编码',
            minWidth: 150
          },
          {
            prop: 'createBy',
            label: '创建人',
            minWidth: 150,
            type: 'text'
          },
          {
            prop: 'createTime',
            label: '创建时间',
            minWidth: 150,
            type: 'date',
            formatData: ({ createTime }) => {
              return parseTime(createTime)
            }
          }],
        btnList: !this.isProduction ? [
          {
            buttonName: '新增',
            optCode: 'add',
            outerFlag: true
          },
          {
            buttonName: '删除',
            optCode: 'del',
            outerFlag: true
          },
          {
            buttonName: '导出',
            optCode: 'export',
            outerFlag: true
          }] : null
      },
      showAdd: false,
      exportVisible: false,
      exportConfig: [
        {
          code: 'exportUserList',
          name: '用户名单导出',
          async: false, // 是否异步
          dataApi: `${process.env.VUE_APP_BASE_API}/api/v1/roleAccountList/export`,
          filtersRaw: [],
          paramsRaw: {},
          selectedRows: [], // 当前所选中的数据航
          queryField: 'id'// 指定行导出的字段名称
        }
      ]
    }
  },
  created() {
    this.otherFilters = [
      { id: 'roleId', property: 'roleId', operator: '=', value: this.roleId }
    ]
  },
  methods: {
    btnOperate(code) {
      switch (code) {
        case 'add':
          this.showAdd = true
          break
        case 'del':
          if (!this.singleJudge(this.tableSelected, '删除', true)) {
            return
          }
          this.handleDelete()
          break
        case 'export':
          this.handleExport()
          break
        default:
          break
      }
    },
    // 刷新表格数据
    refreshTable(isInit) {
      this.$nextTick(() => {
        this.$refs.refTable.initTableData(isInit ? '' : 'onPage')
      })
    },
    handleSelectionChange(rows) {
      this.tableSelected = rows
    },
    // 删除处理
    handleDelete() {
      const ids = this.tableSelected.map(v => v.id)
      this.$confirm('此操作将永久删除当前所选用户名单, 是否继续?', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delRoleAccount(ids).then(res => {
          if (res.success === 1) {
            this.$message({
              message: res.msg || '删除成功',
              type: 'success'
            })
            this.refreshTable()
          }
        })
      }).catch(() => {})
    },
    // 导出
    handleExport() {
      const allFilters = this.$refs.refTable.getAllFilters()
      const { searchBarFilter } = allFilters
      this.exportVisible = true
      this.exportConfig.forEach(item => {
        if (item.dataApi) {
          item.selectedRows = this.tableSelected
          item.filtersRaw = [...this.otherFilters, ...searchBarFilter]
        }
      })
    },
    handleSave(data) {
      const params = data.map(v => {
        return {
          roleId: this.roleId,
          userId: v.userId,
          userName: v.userName,
          account: v.account,
          staffCode: v.staffCode
        }
      })
      saveRoleAccount(params).then(res => {
        if (res.success === 1) {
          this.$message({
            message: res.msg || '新增成功',
            type: 'success'
          })
          this.refreshTable()
        }
      })
    }
  }
}

</script>
<style lang='scss' scoped>
.grey-color{
  margin-left: 20px;
  font-size: 12px;
  color: #999;
  font-weight: normal;
}
</style>
